import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
import Detail from "../views/DetailView.vue";
import Detail2 from "../views/Detail2View.vue";
import Mine from "../views/MineView.vue";
import Top from "../views/TopView.vue";
import Bottom from "../views/BottomView.vue";
import Order from "../views/OrderView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    components: {
      default: HomeView,
      a: Top,
      b: Bottom,
    },
    meta: {
      title: "首页",
    },
  },
  {
    path: "/about",
    name: "about",
    component: () => import("../views/AboutView.vue"),
    meta: {
      title: "关于",
    },
  },
  {
    path: "/pay",
    name: "pay",
    component: () => import("../views/PayView.vue"),
    meta: {
      title: "结算",
      isLogin: true,
    },
    beforeEnter: (to, from, next) => {
      // ...
      console.log(to);
      console.log(from);
      console.log(next);
      if (from.name == "order") {
        next();
      } else {
        next("/order");
      }
    },
  },
  {
    path: "/order",
    name: "order",
    component: Order,
    meta: {
      title: "订单",
      isLogin: true, //登录才能看
    },
  },
  {
    path: "/user",
    name: "user",
    component: ()=>import  ("../views/UserView.vue"),
    meta: {
      title: "用户",
      isLogin: true, //登录才能看
    },
  },
  {
    path: "/list",
    name: "list",
    component: () => {
      return import("../views/ListView.vue");
    },
    meta: {
      title: "列表",
    },
  },
  {
    path: "/detail/:id",
    name: "detail",
    component: Detail,
    meta: {
      title: "详情",
    },
  },
  {
    path: "/detail2",
    name: "detail2",
    component: Detail2,
  },
  {
    path: "/test1",
    name: "test1",
    component: () => import("../views/TestView1.vue"),
  },
  {
    path: "/test2",
    name: "test2",
    component: () => import("../views/TestView2.vue"),
  },
  {
    path: "/mine",
    alias: "/wode",
    name: "mine",
    component: Mine,
    meta: {
      title: "我的",
    },
    children: [
      {
        path: "",
        name: "login",
        component: () => import("../views/LoginView.vue"),
        meta: {
          title: "我的登录",
        },
      },
      {
        path: "login",
        name: "login",
        component: () => import("../views/LoginView.vue"),
        meta: {
          title: "我的登录",
        },
      },
      {
        path: "register",
        name: "register",
        component: () => import("../views/RegisterView.vue"),
        meta: {
          title: "我的注册",
        },
      },
    ],
  },
  {
    path: "/404",
    name: "404",
    meta: {
      title: "404",
    },
    component: () => import("../views/NotFound.vue"),
  },

  {
    path: "*",
    redirect: () => "/404",
  },
];

const router = new VueRouter({
  mode: "hash",
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    console.log(savedPosition);
    if (to.name == "about") {
      return { x: 0, y: 100 };
    } else {
      return { x: 0, y: 0 };
    }
  },
});
// 获取原型对象push函数
const originalPush = VueRouter.prototype.push;
// 获取原型对象replace函数
const originalReplace = VueRouter.prototype.replace;
// 修改原型对象中的push函数
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};
// 修改原型对象中的replace函数
VueRouter.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch((err) => err);
};

router.beforeEach((to, from, next) => {
  // console.log(to);
  // console.log(from);
  // console.log(next);
  if (to.meta) {
    document.title = to.meta.title;

    if (to.meta.isLogin) {
      //需要判断登录
      let loginName = window.localStorage.getItem("loginName");
      //找到了 登录的用户名
      if (!loginName) {
        //没有
        next("/mine/login");
      }
    }
  }

  next();
});

export default router;
